<template>
  <div class="company-wrap" :class="{ 'hidden-wrap':stepNum >= 4 }">
    <!-- 企业信息 -->
    <div v-if="stepNum == 1">
      <div class="account">
        <span class="company_title">企业信息</span>
      </div>
      <div class="account jt-account">
        <div @click="openSheet(1)" class="link-box">
          <p>{{tradeTitle}}</p>
          <van-icon class="icon" name="arrow" />
        </div>
        <van-action-sheet v-model="tradeFlag">
          <div class="card-box-title">
            <span>
              请选择行业类型
              <van-icon class="van-icon van-icon-cross" @click="tradeFlag = false"></van-icon>
            </span>
          </div>
          <div class="card-box">
            <p
              v-for="(item,index) in industryType"
              :key="index"
              :class="{'active-item' : Trade_active == index}"
              @click="selectTradeHandle(index,item.name,item.id)"
            >{{item.name}}</p>
            <p @click="determineHandle(1)">确认</p>
          </div>
        </van-action-sheet>
      </div>
      <div class="account">
        <input type="text" ref="name" v-model="vertifyParams.company_name" placeholder="请输入企业名称" />
        <img
          src="@/assets/login/delete.png"
          v-show="vertifyParams.company_name"
          class="delete-icon"
          @click="handleDeleteVal('name')"
        />
      </div>
      <div class="account">
        <input
          type="text"
          ref="address"
          v-model="vertifyParams.company_address"
          placeholder="请输入企业详细地址"
        />
        <img
          src="@/assets/login/delete.png"
          v-show="vertifyParams.company_address"
          class="delete-icon"
          @click="handleDeleteVal('address')"
        />
      </div>
      <div class="account">
        <input
          type="text"
          ref="company_phone"
          v-model="vertifyParams.company_phone"
          placeholder="请输入企业联系电话（选填)"
        />
        <img
          src="@/assets/login/delete.png"
          v-show="vertifyParams.company_phone"
          class="delete-icon"
          @click="handleDeleteVal('company_phone')"
        />
      </div>
      <div class="account">
        <input
          type="text"
          ref="uniCredit"
          v-model="vertifyParams.uniCredit"
          placeholder="请输入统一社会信用代码"
          onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
        />
        <img
          src="@/assets/login/delete.png"
          v-show="vertifyParams.uniCredit"
          class="delete-icon"
          @click="handleDeleteVal('uniCredit')"
        />
      </div>
      <div class="account">
        <span class="company_title">法人信息</span>
      </div>
      <div class="account">
        <input type="text" ref="agent" v-model="vertifyParams.agent" placeholder="请输入企业法人姓名" />
        <img
          src="@/assets/login/delete.png"
          v-show="vertifyParams.agent"
          class="delete-icon"
          @click="handleDeleteVal('agent')"
        />
      </div>
      <div class="account jt-account">
        <div @click="openSheet(0)" class="link-box">
          <p>{{CardTitle}}</p>
          <van-icon class="icon" name="arrow" />
        </div>
        <van-action-sheet v-model="cardFlag">
          <div class="card-box-title">
            <span>
              请选择法人证件类型
              <van-icon class="van-icon van-icon-cross" @click="cardFlag = false"></van-icon>
            </span>
          </div>
          <div class="card-box">
            <p
              v-for="(item,index) in personCardType"
              :key="index"
              :class="{'active-item' : card_active == index}"
              @click="selectCardHandle(index,item.name,item.id)"
            >{{item.name}}</p>
            <p @click="determineHandle(0)">确认</p>
          </div>
        </van-action-sheet>
      </div>
      <div class="account">
        <input
          type="text"
          ref="agent_idcard"
          v-model="vertifyParams.agent_idcard"
          placeholder="请输入法人证件号码"
          onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
        />
        <img
          src="@/assets/login/delete.png"
          v-show="vertifyParams.agent_idcard"
          class="delete-icon"
          @click="handleDeleteVal('agent_idcard')"
        />
      </div>
      <div class="account">
        <input type="number" ref="phone" v-model="vertifyParams.phone" placeholder="请输入法人手机号码" />
        <img
          src="@/assets/login/delete.png"
          v-show="vertifyParams.phone"
          class="delete-icon"
          @click="handleDeleteVal('phone')"
        />
      </div>
      <div
        :class="vertifyParams.company_name && vertifyParams.trade_type_id && vertifyParams.company_address && vertifyParams.uniCredit && vertifyParams.agent && vertifyParams.agent_idcard_type && vertifyParams.agent_idcard &&  vertifyParams.phone? 'btn active' : 'btn'"
        @click="_companyVertify"
      >
        <span>立即验证</span>
      </div>
    </div>

    <!-- 银行账户信息 -->
    <div v-else-if="stepNum==2">
      <div class="account">
        <span class="company_title">银行账户信息</span>
      </div>
      <div class="account">
        <div @click="openAccountSheet('bank')" class="link-box">
          <p>{{bankTitle}}</p>
          <van-icon class="icon" name="arrow" />
        </div>
        <van-action-sheet v-model="bankFlag">
          <div class="card-box-title">
            <span>
              请选择开户银行名称
              <van-icon class="van-icon van-icon-cross" @click="bankFlag = false"></van-icon>
            </span>
          </div>
          <div class="card-box">
            <p
              v-for="(item,index) in bankList"
              :key="index"
              :class="{'active-item' : bank_active == index}"
              @click="selectBankHandle(index,item.bankName,item.id)"
            >{{item.bankName}}</p>
            <p @click="accountQrHandle('bank')">确认</p>
          </div>
        </van-action-sheet>
      </div>

      <div class="account">
        <div @click="openAccountSheet('province')" class="link-box">
          <p>{{provinceTitle}}</p>
          <van-icon class="icon" name="arrow" />
        </div>
        <van-action-sheet v-model="provinceFlag">
          <div class="card-box-title">
            <span>
              请选择开户银行省份
              <van-icon class="van-icon van-icon-cross" @click="provinceFlag = false"></van-icon>
            </span>
          </div>
          <div class="card-box">
            <p
              v-for="(item,index) in provinceList"
              :key="index"
              :class="{'active-item' : province_active == index}"
              @click="selectProvinceHandle(index,item.name,item.id)"
            >{{item.name}}</p>
            <p @click="accountQrHandle('province')">确认</p>
          </div>
        </van-action-sheet>
      </div>

      <div class="account">
        <div @click="openAccountSheet('city')" class="link-box">
          <p>{{cityTitle}}</p>
          <van-icon class="icon" name="arrow" />
        </div>
        <van-action-sheet v-model="cityFlag">
          <div class="card-box-title">
            <span>
              请选择开户银行城市
              <van-icon class="van-icon van-icon-cross" @click="cityFlag = false"></van-icon>
            </span>
          </div>
          <div class="card-box">
            <p
              v-for="(item,index) in citiesList"
              :key="index"
              :class="{'active-item' : city_active == index}"
              @click="selectCityHandle(index,item.name,item.id)"
            >{{item.name}}</p>
            <p @click="accountQrHandle('city')">确认</p>
          </div>
        </van-action-sheet>
      </div>

      <div class="account">
        <div @click="openAccountSheet('subBank')" class="link-box">
          <p>{{subBankTitle}}</p>
          <van-icon class="icon" name="arrow" />
        </div>
        <van-action-sheet v-model="subBankFlag">
          <div class="card-box-title">
            <span>
              请选择开户行支行名称
              <van-icon class="van-icon van-icon-cross" @click="subBankFlag = false"></van-icon>
            </span>
          </div>
          <div class="card-box">
            <p
              v-for="(item,index) in chilBankList"
              :key="index"
              :class="{'active-item' : subBank_active == index}"
              @click="selectSubBankHandle(index,item.name,item.id)"
            >{{item.name}}</p>
            <p @click="accountQrHandle('subBank')">确认</p>
          </div>
        </van-action-sheet>
      </div>
      <div class="account">
        <input type="text" v-model="saveBandCardParams.accountNo" placeholder="请输入企业银行对公账户" />
      </div>

      <div
        :class="saveBandCardParams.accountNo && saveBandCardParams.province && saveBandCardParams.city && saveBandCardParams.parentBankName && saveBandCardParams.bankName ? 'btn active' : 'btn'"
        @click="_companySaveBandCard"
      >
        <span>提交认证</span>
      </div>
    </div>

    <!-- 二次验证 -->
    <div v-else-if="stepNum==3">
      <div class="account">
        <input type="text" v-model="getCodeParams.phone" placeholder="请输入云商通手机号" />
      </div>
      <div class="account yzm_account">
        <input
          class="send-code-inp"
          type="number"
          v-model="empowerParams.code"
          placeholder="输入短信验证码"
        />
        <span v-if="!downShow" class="send-code" @click="_registerGetYstCode">获取验证码</span>
        <span v-else class="downNum-btn">重新发送（{{downNum+'s'}}）</span>
      </div>
      <div
        :class="getCodeParams.phone && empowerParams.code  ? 'btn active' : 'btn'"
        @click="_registerEmpower"
      >
        <span>立即验证</span>
      </div>
    </div>

    <!-- 认证成功 -->
    <div v-else-if="stepNum==4">
      <div class="stepNum3-content">
        <img class="success-img" src="@/assets/authentication/icon3.png" alt />
        <h2>认证成功</h2>
        <p>请前往签署合同，成为代理商</p>
        <span class="success-btn" @click="goContractServices">前往签署</span>
      </div>
    </div>

    <!-- 认证审核中 -->
    <div v-else-if="stepNum==5">
      <div class="stepNum3-content">
        <img class="success-img" src="@/assets/authentication/icon6.png" alt />
        <h2>审核中</h2>
        <p class="stepNum5_p">等待平台审核，如有疑问请联系</p>
        <p class="stepNum5_p">400-156-8818</p>
      </div>
    </div>

    <!-- 认证回退 -->
    <div v-else-if="stepNum==6">
      <div class="stepNum3-content">
        <img class="success-img" src="@/assets/authentication/icon4.png" alt />
        <h2>认证回退</h2>
        <p class="stepNum5_p">如有疑问请联系：400-156-8818</p>
        <span class="success-btn" @click="_companyInit">重新认证</span>
      </div>
    </div>

    <!-- 认证失败 -->
    <div v-else-if="stepNum==7">
      <div class="stepNum3-content">
        <img class="success-img" src="@/assets/authentication/icon4.png" alt />
        <h2>认证失败</h2>
        <p class="stepNum5_p">可能存在问题，营业执照过期，组织代码不正确</p>
        <p class="stepNum5_p">如有疑问请联系：400-156-8818</p>
        <span class="success-btn" @click="_companyAgain">重新认证</span>
      </div>
    </div>

    <!-- 认证异常 -->
    <div v-else-if="stepNum==8">
      <div class="stepNum3-content">
        <img class="success-img" src="@/assets/authentication/icon4.png" alt />
        <h2>实名认证流程异常</h2>
        <p class="stepNum5_p">如有疑问请联系，400-156-8818</p>
      </div>
    </div>
    <!-- 退出当前账号 -->
    <div v-show="stepNum>=4" class="footer">
      <p @click="handleLogout">退出当前账号 ></p>
    </div>
    <van-dialog
      v-model="logoutDialog"
      class="logout-dialog"
      :showConfirmButton="false"
      :showCancelButton="false"
    >
      <div name="title" class="title">提示</div>
      <div name="default" class="content">确定退出当前账号吗？</div>
      <div class="footer">
        <div class="enter" @click="handleEnter">确认</div>
        <div class="cancel" @click="()=>{this.logoutDialog = !this.logoutDialog}">取消</div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {
  personGetIdTpye,
  personVertify,
  companyGetVertifyData,
  companyVertify,
  companyGetParentBank,
  getProvinceAjax,
  getCityAjax,
  companyGetChildBank,
  companySaveBandCard,
  registerGetYstMobile,
  registerGetYstCode,
  registerEmpower,
  companyAgain,
  companyInit,
  register,
  getTradeTypeAjax,
} from "@/api/authentication";
import { removeToken } from "@/utils/auth";
import { Notify } from "vant";
export default {
  data() {
    return {
      stepNum: 0,
      yst_user_type: "",
      logoutDialog: false,
      resCode: "",
      tradeTitle: "请选择行业类型",
      CardTitle: "请选择法人证件类型",
      bankTitle: "请选择开户银行名称",
      provinceTitle: "请选择开户银行省份",
      cityTitle: "请选择开户银行城市",
      subBankTitle: "请选择开户行支行名称",
      tradeFlag: false,
      cardFlag: false,
      bankFlag: false,
      provinceFlag: false,
      cityFlag: false,
      subBankFlag: false,
      Trade_active: 0,
      card_active: 0,
      bank_active: 0,
      province_active: 0,
      city_active: 0,
      subBank_active: 0,
      industryType: [],
      personCardType: [],
      bankList: [],
      provinceList: [],
      citiesList: [],
      chilBankList: [],
      // 企业实名认证信息参数
      vertifyParams: {
        company_name: "",
        trade_type_id: "",
        company_address: "",
        company_phone: "",
        uniCredit: "",
        agent: "",
        agent_idcard_type: "1",
        agent_idcard: "",
        phone: "",
      },
      // 绑定企业对公账号参数
      saveBandCardParams: {
        accountNo: "",
        province: "",
        city: "",
        parentBankName: "",
        bankName: "",
      },
      // 二次验证/支付授权参数
      empowerParams: {
        code: "",
      },
      getCodeParams: {
        action: 9,
        phone: "",
      },
      readyTrade_type_id: "",
      readyTradeTitle: "",
      ready_card_type: "",
      ready_card_title: "",
      ready_bankId: "",
      ready_bankTitle: "",
      ready_provinceId: "",
      ready_provinceTitle: "",

      ready_cityId: "",
      ready_cityTitle: "",

      ready_subBankTitle: "",
      ready_subBankId: "",
      downShow: false,
      timer: null,
      downNum: "",
    };
  },
  created() {
    this._getTradeType();
    this._personGetIdTpye();
    this.getParentBank();
    this._getProvinceAjax();
    this._getYstMobile();
    if (this.$route.params.code) {
      this.resCode = this.$route.params.code;
      this.stepDistribute(this.resCode);
    } else {
      this._register();
    }
  },
  watch: {
    uniCredit(val) {
      if (val.length >= 18) {
        this.vertifyParams.uniCredit = val.substring(0, 18);
      }
    },
    agent_idcard(val) {
      if (val.length >= 18) {
        this.vertifyParams.agent_idcard = val.substring(0, 18);
      }
    },
    phone(val) {
      if (val.length >= 11) {
        this.vertifyParams.phone = val.substring(0, 11);
      }
    },
    agent_idcard_type(newVal, oldVal) {
      if (newVal != oldVal) {
        this.vertifyParams.agent_idcard = "";
      }
    },
    parentBankName(newVal, oldVal) {
      console.log("新主行", newVal);
      console.log("旧主行", oldVal);
      if (newVal != oldVal) {
        this.saveBandCardParams.province = "";
        this.provinceTitle = "请选择开户银行省份";
        this.province_active = 0;
        this.saveBandCardParams.city = "";
        this.cityTitle = "请选择开户银行城市";
        this.city_active = 0;
        this.saveBandCardParams.bankName = "";
        this.subBankTitle = "请选择开户行支行名称";
        this.subBank_active = 0;
        this.saveBandCardParams.accountNo = "";
      }
    },
    province(newVal, oldVal) {
      console.log("新省份", newVal);
      console.log("旧省份", oldVal);
      if (newVal != oldVal) {
        this.saveBandCardParams.city = "";
        this.cityTitle = "请选择开户银行城市";
        this.city_active = 0;
        this.saveBandCardParams.bankName = "";
        this.subBankTitle = "请选择开户行支行名称";
        this.subBank_active = 0;
        this.saveBandCardParams.accountNo = "";
      }
    },
    city(newVal, oldVal) {
      console.log("新城市", newVal);
      console.log("旧城市", oldVal);
      if (newVal != oldVal) {
        this.saveBandCardParams.bankName = "";
        this.subBankTitle = "请选择开户行支行名称";
        this.subBank_active = 0;
        this.saveBandCardParams.accountNo = "";
      }
    },
  },
  computed: {
    agent_idcard_type() {
      return this.vertifyParams.agent_idcard_type;
    },
    parentBankName() {
      return this.saveBandCardParams.parentBankName;
    },
    province() {
      return this.saveBandCardParams.province;
    },
    city() {
      return this.saveBandCardParams.city;
    },
    bankName() {
      return this.saveBandCardParams.bankName;
    },
    uniCredit() {
      return this.vertifyParams.uniCredit;
    },
    agent_idcard() {
      return this.vertifyParams.agent_idcard;
    },
    phone() {
      return this.vertifyParams.phone;
    },
  },
  methods: {
    // 清除输入框
    handleDeleteVal(type) {
      this.$refs[type].focus();
      switch (type) {
        case "name":
          this.vertifyParams.company_name = "";
          break;
        case "address":
          this.vertifyParams.company_address = "";
          break;
        case "company_phone":
          this.vertifyParams.company_phone = "";
          break;
        case "uniCredit":
          this.vertifyParams.uniCredit = "";
          break;
        case "agent":
          this.vertifyParams.agent = "";
          break;
        case "agent_idcard":
          this.vertifyParams.agent_idcard = "";
          break;
        case "phone":
          this.vertifyParams.phone = "";
          break;
      }
    },
    // 打开选择框
    openSheet(flag) {
      if (flag) {
        this.tradeFlag = true;
      } else {
        this.cardFlag = true;
      }
    },
    // 选择行业
    selectTradeHandle(index, name, id) {
      this.readyTrade_type_id = id;
      this.readyTradeTitle = name;
      this.Trade_active = index;
    },
    // 选择法人证件类型
    selectCardHandle(index, name, id) {
      this.ready_card_type = id;
      this.ready_card_title = name;
      this.card_active = index;
    },
    // 选择主行
    selectBankHandle(index, name, id) {
      this.bank_active = index;
      this.ready_bankTitle = name;
      this.ready_bankId = id;
    },
    // 选择开行省份
    selectProvinceHandle(index, name, id) {
      this.province_active = index;
      this.ready_provinceTitle = name;
      this.ready_provinceId = id;
    },
    // 选择开行县市
    selectCityHandle(index, name, id) {
      this.city_active = index;
      this.ready_cityTitle = name;
      this.ready_cityId = id;
    },
    // 选择支行
    selectSubBankHandle(index, name, id) {
      this.subBank_active = index;
      this.ready_subBankTitle = name;
      this.ready_subBankId = id;
    },
    // 银行账户信息确认
    accountQrHandle(flag) {
      if (flag == "bank") {
        this.saveBandCardParams.parentBankName = this.ready_bankId;
        this.bankTitle = this.ready_bankTitle;
        this.bankFlag = false;
      } else if (flag == "province") {
        this.saveBandCardParams.province = this.ready_provinceId;
        this.provinceTitle = this.ready_provinceTitle;
        this.provinceFlag = false;
        this.getCitiesList(this.saveBandCardParams.province);
      } else if (flag == "city") {
        this.saveBandCardParams.city = this.ready_cityId;
        this.cityTitle = this.ready_cityTitle;
        this.cityFlag = false;
        if (
          this.saveBandCardParams.parentBankName &&
          this.saveBandCardParams.province &&
          this.saveBandCardParams.city
        ) {
          this.getBankName();
        }
      } else if (flag == "subBank") {
        this.saveBandCardParams.bankName = this.ready_subBankId;
        this.subBankTitle = this.ready_subBankTitle;
        this.subBankFlag = false;
      }
    },
    // 选择确认
    determineHandle(flag) {
      if (flag) {
        // 选择行业确认
        this.vertifyParams.trade_type_id = this.readyTrade_type_id;
        this.tradeTitle = this.readyTradeTitle;
        this.tradeFlag = false;
      } else {
        // 选择法人证件类型确认
        this.vertifyParams.agent_idcard_type = this.ready_card_type;
        this.CardTitle = this.ready_card_title;
        this.cardFlag = false;
      }
    },
    // 选择银行账户信息
    openAccountSheet(flag) {
      if (flag == "bank") {
        this.bankFlag = true;
      } else if (flag == "province") {
        this.provinceFlag = true;
      } else if (flag == "city") {
        if (this.saveBandCardParams.province == "") {
          Notify({ type: "warning", message: "请先选择开户银行省份" });
        } else {
          this.cityFlag = true;
        }
      } else if (flag == "subBank") {
        if (this.saveBandCardParams.parentBankName == "") {
          Notify({ type: "warning", message: "请选择开户银行名称" });
        } else if (this.saveBandCardParams.province == "") {
          Notify({ type: "warning", message: "请选择开户银行省份" });
        } else if (this.saveBandCardParams.city == "") {
          Notify({ type: "warning", message: "请选择开户银行城市" });
        } else {
          this.subBankFlag = true;
        }
      }
    },
    // 获取行业类型列表
    _getTradeType() {
      getTradeTypeAjax().then((res) => {
        console.log("行业类型res", res);
        if (res.code == 1) {
          this.industryType = res.data;
          console.log("行业类型", this.industryType);
          this.readyTrade_type_id = this.industryType[0].id;
          this.readyTradeTitle = this.industryType[0].name;
        } else {
          Notify({ type: "warning", message: res.msg || "网络太慢了，请重试" });
        }
      });
    },
    // 实名认证检测
    _register() {
      register().then((res) => {
        console.log("实名认证检测res", res);
        this.yst_user_type = localStorage.getItem("yst_user_type");
        console.log("用户类型", this.yst_user_type);
        let testCode = res.code;
        // let testCode = 10015;
        if (testCode == 10010) {
          // 实名认证选择页面
          // this.$router.push({
          //   name: "explain",
          // });
          this.stepNum = 1;
        } else if (testCode == 10025) {
          // 实名认证流程异常
          this.stepNum = 8;
          this.loading = false;
        } else if (
          (testCode >= 10011 && testCode <= 10014) ||
          testCode == 10021 ||
          testCode == 10022 ||
          (testCode == 10020 && this.yst_user_type == 1)
        ) {
          // 认证未完成跳转到个人认证页面
          this.$router.push({
            name: "personal",
            params: {
              code: testCode,
            },
          });
        } else if (
          (testCode >= 10015 && testCode <= 10019) ||
          testCode == 10023 ||
          testCode == 10024 ||
          testCode == 10025 ||
          (testCode == 10020 && this.yst_user_type == 2)
        ) {
          // 认证未完成跳转到企业认证页面
          this.stepDistribute(testCode);
        }
      });
    },

    // 步骤分发
    stepDistribute(resCode) {
      console.log("步骤分发res", resCode);
      if (resCode == 10015 || !resCode) {
        // 第一步：企业认证信息填写
        this.stepNum = 1;
      } else if (resCode == 10016) {
        // 第二步：绑定企业对公账号
        this.stepNum = 2;
      } else if (resCode == 10018) {
        // 第三步：企业实名认证审核中
        this.stepNum = 5;
      } else if (resCode == 10019) {
        // 第四步：企业支付授权
        this.stepNum = 3;
      } else if (resCode == 10023) {
        // 企业认证审核失败
        this.stepNum = 7;
      } else if (resCode == 10020) {
        // 企业认证审核成功
        this.stepNum = 4;
      } else if (resCode == 10024) {
        // 企业认证审核回退
        this.stepNum = 6;
      } else if (resCode == 10025) {
        // 企业认证审核异常
        this.stepNum = 8;
      }
      this.loading = false;
    },
    // 验证码倒计时
    countDown() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.downNum = TIME_COUNT;
        this.downShow = true;
        this.timer = setInterval(() => {
          if (this.downNum > 0 && this.downNum <= TIME_COUNT) {
            this.downNum--;
          } else {
            this.downShow = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 获取证件类型数据
    _personGetIdTpye() {
      personGetIdTpye().then((res) => {
        let arr = [];
        for (let i in res.data.cardType) {
          arr.push({
            id: i,
            name: res.data.cardType[i],
          });
        }
        this.personCardType = arr;
        this.ready_card_type = this.personCardType[0].id;
        this.ready_card_title = this.personCardType[0].name;
        console.log("获取身份证类型数据", this.personCardType);
      });
    },
    // 获取省份列表数据
    _getProvinceAjax() {
      getProvinceAjax().then((res) => {
        console.log("获取省份列表数据res", res.data);
        this.provinceList = res.data;
        this.ready_provinceId = this.provinceList[0].id;
        this.ready_provinceTitle = this.provinceList[0].name;
      });
    },
    // 获取云商通手机号
    _getYstMobile() {
      registerGetYstMobile().then((res) => {
        if (res.code == 1) {
          this.getCodeParams.phone = res.data.phone;
        }
      });
    },
    // 获取验证码
    _registerGetYstCode() {
      if (this.getCodeParams.phone == "") {
        this.$message.error("请输入手机号");
      } else {
        registerGetYstCode(this.getCodeParams).then((res) => {
          if (res.code == 1) {
            this.countDown();
            Notify({ type: "success", message: "发送成功，请注意查收短信" });
          } else {
            Notify({ type: "warning", message: res.msg || "短信发送失败" });
          }
        });
      }
    },
    // 二次验证-支付授权
    _registerEmpower() {
      if (this.empowerParams.code == "") {
        Notify({ type: "warning", message: "请输入验证码" });
      } else {
        this.$toast.loading({
          duration: 0,
          message: "正在验证",
          forbidClick: true,
          loadingType: "spinner",
        });
        registerEmpower(this.empowerParams)
          .then((res) => {
            if (res.code == 1) {
              this.resCode = res.data.code;
              this.stepDistribute(this.resCode);
            } else {
              Notify({ type: "warning", message: res.msg || "请求失败" });
            }
          })
          .finally(() => {
            this.$toast.clear();
          });
      }
    },
    // 企业实名认证信息获取
    _companyGetVertifyData() {
      companyGetVertifyData().then((res) => {
        if (res.code == 1) {
          console.log("企业实名认证信息", res);
          this.vertifyParams = res.data;
          // this.vertifyParams.company_name = res.data.company_name;
          // this.vertifyParams.trade_type_id = res.data.trade_type_id;
          // this.vertifyParams.company_address = res.data.company_address;
          // this.vertifyParams.company_phone = res.data.company_phone;
          // this.vertifyParams.uniCredit = res.data.uniCredit;
          // this.vertifyParams.agent = res.data.agent;
          // this.vertifyParams.agent_idcard_type = res.data.agent_idcard_type;
          // this.vertifyParams.agent_idcard = res.data.agent_idcard;
          // this.vertifyParams.phone = res.data.phone;
        }
      });
    },
    // 企业实名信息提交
    _companyVertify() {
      const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (this.vertifyParams.company_name == "") {
        Notify({ type: "warning", message: "请输入企业名称" });
      } else if (this.vertifyParams.trade_type_id == "") {
        Notify({ type: "warning", message: "请选择行业类型" });
      } else if (this.vertifyParams.company_address == "") {
        Notify({ type: "warning", message: "请输入企业地址" });
      } else if (this.vertifyParams.uniCredit == "") {
        Notify({ type: "warning", message: "请输入统一社会信用代码" });
      } else if (this.vertifyParams.agent == "") {
        Notify({ type: "warning", message: "请输入法人名称" });
      } else if (this.vertifyParams.agent_idcard_type == "") {
        Notify({ type: "warning", message: "请选择法人证件类型" });
      } else if (this.vertifyParams.agent_idcard == "") {
        Notify({ type: "warning", message: "请输入法人证件号码" });
      } else if (this.vertifyParams.phone == "") {
        Notify({ type: "warning", message: "请输入法人手机号码" });
      } else if (
        this.vertifyParams.phone &&
        !reg.test(this.vertifyParams.phone)
      ) {
        Notify({ type: "warning", message: "法人手机号码格式错误" });
      } else {
        this.$toast.loading({
          duration: 0,
          message: "正在验证",
          forbidClick: true,
          loadingType: "spinner",
        });
        companyVertify(this.vertifyParams)
          .then((res) => {
            if (res.code == 1) {
              this.resCode = res.data.code;
              this.stepDistribute(this.resCode);
            } else {
              Notify({ type: "warning", message: res.msg || "请求失败" });
            }
          })
          .finally(() => {
            this.$toast.clear();
          });
      }
    },
    submitHandle(num) {
      this.stepNum = num;
    },
    goContractServices() {
      this.$router.push({ name: "contract" });
    },
    // 获取县市列表数据
    getCitiesList(id) {
      let params = {
        province_id: id,
      };
      getCityAjax(params).then((res) => {
        console.log("获取县市列表数据res", res.data);
        this.citiesList = res.data;
        this.ready_cityId = this.citiesList[0].id;
        this.ready_cityTitle = this.citiesList[0].name;
      });
    },
    // 获取企业开户主行数据
    getParentBank() {
      companyGetParentBank().then((res) => {
        console.log("主行数据res", res);
        if (res.code == 1) {
          this.bankList = res.data;
          this.ready_bankId = this.bankList[0].id;
          this.ready_bankTitle = this.bankList[0].bankName;
        }
      });
    },
    // 获取企业开户支行数据
    getBankName() {
      let params = {
        parentBank_id: this.saveBandCardParams.parentBankName,
        province_id: this.saveBandCardParams.province,
        city_id: this.saveBandCardParams.city,
      };
      companyGetChildBank(params).then((res) => {
        console.log("支行数据res", res);
        this.chilBankList = res.data;
        this.ready_subBankTitle = this.chilBankList[0].name;
        this.ready_subBankId = this.chilBankList[0].id;
      });
    },
    // 绑定企业对公账号
    _companySaveBandCard() {
      if (this.saveBandCardParams.parentBankName == "") {
        Notify({ type: "warning", message: "请选择开户银行企业名称" });
      } else if (this.saveBandCardParams.province == "") {
        Notify({ type: "warning", message: "请选择开户银行省份" });
      } else if (this.saveBandCardParams.city == "") {
        Notify({ type: "warning", message: "请选择开户银行县市" });
      } else if (this.saveBandCardParams.bankName == "") {
        Notify({ type: "warning", message: "请选择开户银行支行名称" });
      } else if (this.saveBandCardParams.accountNo == "") {
        Notify({ type: "warning", message: "请输入企业对公账户" });
      } else {
        this.$toast.loading({
          duration: 0,
          message: "正在提交",
          forbidClick: true,
          loadingType: "spinner",
        });
        companySaveBandCard(this.saveBandCardParams)
          .then((res) => {
            if (res.code == 1) {
              this.resCode = res.data.code;
              this.stepDistribute(this.resCode);
            } else {
              Notify({ type: "warning", message: res.msg || "请求失败" });
            }
          })
          .finally(() => {
            this.$toast.clear();
          });
      }
    },
    // 审核失败重新认证
    _companyAgain() {
      companyAgain().then((res) => {
        if (res.code == 1) {
          this.resCode = res.data.code;
          this.stepDistribute(this.resCode);
        } else {
          Notify({ type: "warning", message: res.msg || "请求失败" });
        }
      });
    },
    // 审核回退重新认证
    _companyInit() {
      companyInit().then((res) => {
        if (res.code == 1) {
          this.$route.push({
            name: "explain",
          });
        } else {
          Notify({ type: "warning", message: res.msg || "请求失败" });
        }
      });
    },
    // 退出登录
    handleLogout() {
      this.logoutDialog = true;
    },
    // 确认退出登录
    handleEnter() {
      this.logoutDialog = false;
      removeToken();
      this.$router.push({
        path: "/login",
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.company-wrap {
  width: 100vw;
  height: 100vh;
  padding: 0 50px;
  text-align: left;
  font-size: 30px;
  &.hidden-wrap {
    overflow: hidden;
  }

  .account {
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 27px;
    padding-top: 78px;
    position: relative;
    display: flex;
    &.jt-account {
      display: block;
    }
    .delete-icon {
      width: 26px;
      height: 26px;
      margin-top: 6px;
    }
    &.yzm_account {
      display: flex;
      justify-content: space-between;
    }
    .company_title {
      color: #999999;
    }
    .link-box {
      display: flex;
      justify-content: space-between;
      .icon {
        color: #bcbcbc;
        margin-top: 3px;
      }
    }
    .send-code {
      color: #387eff;
    }
    .downNum-btn {
      color: #c0c4cc;
    }
    input {
      width: 100%;
      &::placeholder {
        color: #cccccc;
      }
      &.send-code-inp {
        width: initial;
      }
    }
    .card-box-title {
      font-size: 28px;
      color: #333;
      text-align: center;
      line-height: 160px;
      span {
        display: inline-block;
        width: 100%;
        position: relative;
        .van-icon {
          position: absolute;
          top: 49%;
          transform: translateY(-50%);
          right: 30px;
          background: #f7f7f7;
          border-radius: 50%;
          padding: 4px;
        }
      }
    }
    .card-box {
      text-align: center;
      color: #ccc;
      font-size: 34px;
      margin-top: 50px;
      overflow: hidden;
      margin-bottom: 120px;
      //   border-top: 0.5px solid #f2f2f2;
      position: relative;
      &::before {
        position: absolute;
        box-sizing: border-box;
        content: " ";
        pointer-events: none;
        width: 100%;
        top: 0;
        left: 0;
        border-bottom: 1px solid #f2f2f2;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
      p {
        padding: 38px 0;
        // border-bottom: 0.5px solid #f2f2f2;
        position: relative;
        transition: all 0.3s;
        font-weight: 400;
        &::after {
          position: absolute;
          box-sizing: border-box;
          content: " ";
          width: 100%;
          pointer-events: none;
          bottom: 0;
          left: 0;
          border-bottom: 1px solid #f2f2f2;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
        }
        &:last-of-type {
          color: #fe6018;
          border: none;
          position: fixed;
          z-index: 99;
          bottom: 0;
          width: 100%;
          background: #fff;
        }
        &.active-item {
          color: #111111;
          font-weight: 500;
        }
        &:active {
          background: #f2f2f2;
        }
      }
    }
  }
  .btn {
    width: 650px;
    height: 90px;
    margin: 0 auto;
    text-align: center;
    line-height: 90px;
    margin-top: 100px;
    margin-bottom: 40px;
    background: linear-gradient(
      90deg,
      rgba(255, 212, 154, 1),
      rgba(255, 191, 163, 1)
    );
    &.active {
      background: linear-gradient(
        90deg,
        rgba(255, 147, 3, 1),
        rgba(254, 96, 24, 1)
      );
    }
    span {
      color: #fff;
    }
  }
  .stepNum3-content {
    margin-top: 380px;
    text-align: center;
    .success-img {
      width: 515px;
      height: 225px;
      margin: 0 auto;
      margin-bottom: 40px;
    }
    h2 {
      font-size: 36px;
      font-weight: 600;
      color: #111;
    }
    p {
      padding: 30px 0 50px 0;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      &.stepNum5_p {
        padding: 0;
        padding-bottom: 20px;
        &:first-of-type {
          padding-top: 30px;
        }
        &:last-of-type {
          padding-bottom: 50px;
        }
      }
      span {
        color: #387eff;
      }
    }
    .success-btn {
      display: inline-block;
      width: 310px;
      height: 88px;
      background: rgba(254, 96, 24, 0);
      border: 1px solid rgba(236, 236, 236, 1);
      border-radius: 4px;
      line-height: 88px;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(254, 96, 24, 1);
    }
  }
  .footer {
    text-align: center;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
  }
  .logout-dialog {
    width: 650px;
    height: 327px;
    text-align: center;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    padding: 30px 50px;
    .title {
      font-size: 32px;
      font-weight: 500;
      color: rgba(17, 17, 17, 1);
      margin-bottom: 30px;
    }
    .content {
      font-size: 30px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 48px;
      margin-bottom: 60px;
    }
    .footer {
      display: flex;
      justify-content: center;
      > div {
        width: 210px;
        height: 70px;
        line-height: 70px;
        background: rgba(238, 238, 238, 1);
        border-radius: 4px;
        color: #666666;
        &:nth-of-type(1) {
          margin-right: 40px;
          color: #fff;
          background: linear-gradient(
            90deg,
            rgba(255, 147, 3, 1),
            rgba(254, 96, 24, 1)
          );
        }
      }
    }
  }
}
</style>